<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/head.jsp" />
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/demo.css" rel="stylesheet"/>
</head>
<body>
<script>
    var addDiv = function (value) {
        if(typeof(value) == "undefined"){
            value = "";
        }
        var valueDiv = '<div class="layui-form-item" name="value_div">' +
                '<label class="layui-form-label">可选值</label>' +
                '<div class="layui-input-inline">' +
                '<input type="text" name="attribute_value" lay-verify="required" autocomplete="off" placeholder="请输入可选值"class="layui-input" value="' + value + '">' +
                '</div>' +
                '<a onclick="deleteDiv(this)" href="javascript:void(0);">' +
                '<i class="layui-icon" style="font-size:25px;color:black;">&#xe640;</i>' +
                '</a>' +
                '</div>';
        $("#add_a").before(valueDiv);
    };
    var deleteDiv = function (a) {
        var length = $("div [name='value_div']").length;
        if (length == 1) {
            layer.msg("最少有一个可选值", {icon: 5});
        } else {
            $($(a).parent()).remove();
        }
    };
</script>
<form class="layui-form layui-form-pane" id="_form">
    <div class="layui-form-item">
        <label class="layui-form-label">属性名称</label>
        <div class="layui-input-block">
            <input type="text" name="key" lay-verify="required" autocomplete="off" placeholder="请输入商属性名称"
                   class="layui-input" value="${attributeKey.keyName}">
        </div>
    </div>
    <div id="value_div">
        <a id="add_a" onclick="addDiv()" href="javascript:void(0);">
            <i class="layui-icon" style="font-size: 25px; color: black;">&#xe654;</i>
        </a>
    </div>
    <div class="layui-form-item" style="margin-top: 50px;">
        <div class="layui-input-block" style="float: right">
            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>
</form>
<jsp:include page="/resources/inc/footer.jsp" />
<script>
    var keyId = "${attributeKey.id}";
    $(function () {
        <c:forEach items="${valueList}" var="value">
            addDiv("${value.valueName}");
        </c:forEach>
        var url = "${basePath}/manage/product/attribute/update";
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        commonSubmit(url, "sub", index);
    });
    var getFormData = function () {
        var inputs = $("input[name='attribute_value']");
        var values = [];
        for (var i = 0; i < inputs.length; i++) {
            values.push(inputs[i].value);
        }
        var key = $("input[name='key']").val();
        return JSON.stringify({keyId: keyId, key: key, values: values});
    }
</script>
</body>
</html>
